<template>
    <div class="ml-16px mr-16px content-container">
        <div class="flex items-center pt-26px pl-26px pr-26px">
            <el-input v-model="formData.title" placeholder="请输入任务名称" class="w-300px mr-12px"></el-input>
            <el-button type="primary" :icon="Search" v-debounce="{ callback: handleSearch, delay: 300 }">搜索</el-button>
            <el-button type="primary" :icon="Plus" v-debounce="{ callback: handleSearch, delay: 300 }">添加任务</el-button>
        </div>
        <div class="pt-26px pl-26px pr-26px table-container">
            <el-table :data="state.videos" :default-sort="{ prop: 'total', order: 'descending' }" class="w-full">
                <el-table-column prop="sort" label="序号" align="center" width="60" />
                <el-table-column prop="name" label="任务名称" align="center" width="80" />
                <el-table-column prop="account" label="发布账号" align="center" width="100" />
                <el-table-column prop="configuration" label="任务配置" align="center" />
                <el-table-column prop="total" label="已发布/总量" sortable align="center" width="130">
                    <template #default="scope">
                        {{ scope.row.published }}/{{ scope.row.total }}
                    </template>
                </el-table-column>
                <el-table-column prop="last" label="最新一条发布" align="center" width="110" />
                <el-table-column prop="state" label="任务状态" align="center" width="150">
                    <template #default="scope">
                        <div v-if="scope.row.state == 0"><el-tag type="success"><!--9:16-->发布完毕</el-tag></div>
                        <div v-else-if="scope.row.state == 1"><el-tag>未发布</el-tag></div>
                    </template>
                </el-table-column>
                <el-table-column prop="folder" label="文件夹" align="center" width="200">
                    <template #default="scope">
                        <div>视频：</div>
                        <div>封面：</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="300">
                    <template #default="scope">
                        <el-button :icon="Setting" type="primary" text>编辑</el-button>
                        <el-button :icon="CopyDocument" type="primary" text class="!ml-0">复制</el-button>
                        <el-button :icon="Delete" type="danger" text class="!ml-0">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pt-26px pl-26px pr-26px pb-26px page-container flex flex-center">
            <el-pagination
                size="small"
                background
                layout="prev, pager, next"
                :total="50"
            />
        </div>
    </div>
</template>

<script setup lang="ts">
import { Search,Plus,Delete,Setting,CopyDocument } from '@element-plus/icons-vue'

const formData = reactive({
    title: ''
})

const state = reactive({
    videos:[
        {
            sort: 1,
            name: '是',
            account:'',
            configuration:'11-13至11-29:0-24时每个账号发1条',
            state: 1,
            total:17,
            published:0,
            last:40,
            folder:''
        },
    ]
})

function handleSearch() {
    console.log('search')
}
</script>

<style scoped>

</style>